<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
            label-width="68px">
            <el-form-item label="项目名称" prop="projectName">
                <el-input v-model="queryParams.projectName" placeholder="请输入项目名称" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="合同编号" prop="contractNumber">
                <el-input v-model="queryParams.contractNumber" placeholder="请输入合同编号" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="收款时间" prop="collectionTime">
                <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
                    range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table height="450" v-loading="loading" :data="receivableList" @selection-change="handleSelectionChange"
            :row-style="{ height: '30px' }" border :cell-style="{ padding: '0px' }" highlight-current-row>
            <el-table-column label="序号" type="index" align="center" prop="index" :index="indexMethod"></el-table-column>
            <el-table-column label="款项名称" align="center" prop="payment" width="120" :show-overflow-tooltip="true" />
            <el-table-column label="项目名称" align="center" prop="projectName" width="220" :show-overflow-tooltip="true" />
            <el-table-column label="合同编号" align="center" prop="contractNumber" width="100"
                :show-overflow-tooltip="true" />
            <el-table-column label="收款银行" align="center" prop="bankName" width="220" :show-overflow-tooltip="true" />
            <el-table-column label="应收金额" align="center" prop="amount" width="80" :show-overflow-tooltip="true" />
            <el-table-column label="收款金额" align="center" prop="paidInAmount" width="80" :show-overflow-tooltip="true" />
            <!-- <el-table-column label="开票金额" align="center" prop="invoicing" width="80" :show-overflow-tooltip="true" /> -->
            <el-table-column label="收款时间" align="center" prop="collectionTime" width="120"
                :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.collectionTime, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <!-- <el-table-column label="开票时间" align="center" prop="invoicingTime" width="120" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.invoicingTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column> -->
            <el-table-column label="状态" align="center" prop="status" :show-overflow-tooltip="true">

                <template slot-scope="scope">
                    <dict-tag :options="dict.type.receivable_status" :value="scope.row.status"
                        :class="{ 'text-no': scope.row.status == 0, 'text-yes': scope.row.status == 1 }" />
                </template></el-table-column>
            <el-table-column label="确认人" align="center" prop="confirmName" :show-overflow-tooltip="true" />
            <el-table-column label="创建时间" align="center" prop="creationTime" width="120" :show-overflow-tooltip="true">

                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.creationTime, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <!-- <el-table-column label="创建人" align="center" prop="creationName" width="120" :show-overflow-tooltip="true" /> -->
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">

                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-view"
                        @click="handleView(scope.row, scope.$index + 1)"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />

        <!-- 添加或修改【请填写功能名称】对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="1100px" append-to-body>
            <div v-if="opt != 'add'">
                <el-descriptions title="">
                    <el-descriptions-item label="序号">
                        <el-tag size="medium">{{ index }}</el-tag>
                    </el-descriptions-item>
                </el-descriptions>
            </div>
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <el-row>
                    <el-col :span="8" style="height: 55px;">
                        <el-form-item label="合同名称" prop="contractName" label-width="110px">
                            <el-input v-model="form.contractName" placeholder="请输入合同名称" style="width: 240px;"
                                disabled="disabled" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" style="height: 55px;">
                        <el-form-item label="合同编号" prop="contractNumber" label-width="110px">
                            <el-input v-model="form.contractNumber" placeholder="请输入合同编号" style="width: 240px;"
                                disabled="disabled" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" style="height: 55px;">
                        <el-form-item label="项目名称" prop="projectName" label-width="110px">
                            <el-input v-model="form.projectName" placeholder="请输入项目名称" style="width: 240px;"
                                disabled="disabled" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8" style="height: 55px;">
                        <el-form-item label="客户名称" prop="cusName" label-width="110px">
                            <el-input v-model="form.cusName" placeholder="请输入客户名称" style="width: 240px;"
                                disabled="disabled" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" style="height: 55px;">
                        <el-form-item label="款项名称" prop="payment" label-width="110px">
                            <el-input v-model="form.payment" style="width: 240px;" disabled="disabled" />
                        </el-form-item>
                    </el-col>
<!--                    <el-col :span="8" style="height: 55px;">-->
<!--                        <el-form-item label="主分类" prop="classificationId" label-width="110px">-->
<!--                            <treeselect v-model="form.classificationId" :options="optionData" placeholder="请选择主分类"-->
<!--                                :disabled="disabled" />-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
                </el-row>
                <el-row>
                    <el-col :span="8" style="height: 55px;">
                        <el-form-item label="应收金额" prop="amount" label-width="110px">
                            <el-input v-model="form.amount" placeholder="请输入应收金额" style="width: 240px;"
                                disabled="disabled" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" style="height: 55px;">
                        <el-form-item label="预计收款时间" prop="enestimatedCollectionTimedTime" label-width="110px">
                            <el-date-picker clearable v-model="form.estimatedCollectionTime" type="date"
                                value-format="yyyy-MM-dd" style="width: 240px;" :disabled="isView" disabled="disabled">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" style="height: 55px;">
                        <el-form-item label="收款金额" prop="paidInAmount" label-width="110px">
                            <el-input v-model="form.paidInAmount" placeholder="请输入收款金额" style="width: 240px;"
                                maxlength="8" :disabled="disabled" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8" style="height: 55px;">
                        <el-form-item label="收款银行" prop="bankName" label-width="110px">
                            <el-input v-model="form.bankName" placeholder="请输入收款银行" style="width: 240px;" maxlength="50"
                                :disabled="disabled" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" style="height: 55px;">
                        <el-form-item label="银行流水号" prop="bankSerial" label-width="110px">
                            <el-input v-model="form.bankSerial" placeholder="请输入银行流水号" style="width: 240px;"
                                maxlength="50" :disabled="disabled" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" style="height: 55px;">
                        <el-form-item label="开票金额" prop="invoicing" label-width="110px">
                            <el-input v-model="form.invoicing" placeholder="请输入开票金额" style="width: 240px;" maxlength="8"
                                :disabled="disabled" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8" style="height: 55px;">
                        <el-form-item label="收款时间" prop="collectionTime" label-width="110px">
                            <el-date-picker clearable v-model="form.collectionTime" type="date"
                                value-format="yyyy-MM-dd" placeholder="请选择收款时间" style="width: 240px;"
                                :disabled="disabled">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" style="height: 55px;">
                        <el-form-item label="开票时间" prop="invoicingTime" label-width="110px">
                            <el-date-picker clearable v-model="form.invoicingTime" type="date" value-format="yyyy-MM-dd"
                                placeholder="请选择开票时间" style="width: 240px;" :disabled="disabled">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" style="height: 55px;">
                        <el-form-item label="状态" prop="status" label-width="110px">
                            <el-select v-model="form.status" style="width: 240px;" disabled="disabled">
                                <el-option v-for="dict in dict.type.receivable_status" :key="dict.value"
                                    :label="dict.label" :value="dict.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8" style="height: 55px;">
                        <el-form-item label="创建时间" prop="creationTime" label-width="110px">
                            <el-date-picker clearable v-model="form.creationTime" type="date" value-format="yyyy-MM-dd"
                                placeholder="请选择创建时间" style="width: 240px;" disabled="disabled">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8" style="height: 55px;">
                        <el-form-item label="创建人" prop="creationName" label-width="110px">
                            <el-input v-model="form.creationName" placeholder="请输入创建人" style="width: 240px;"
                                disabled="disabled" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="23" style="height: 72px;">
                        <el-form-item label="备注" prop="note" label-width="110px">
                            <el-input v-model="form.note" type="textarea" :rows="2" placeholder="请输入内容"
                                style="width: 947px;" maxlength="2000" :disabled="disabled" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="23" style="height: 55px;">
                        <el-form-item label="发票附件" label-width="110px">
                            <file-view :key="refreshKey" :type="fileType" :businessId="businessId"
                                :businessCode="businessCode"></file-view>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm" v-if="isShowBtn">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="titleClass" :visible.sync="openMainClass" width="500px" append-to-body>
            <el-form ref="formClass" :model="formClass" :inline="true">
                <el-form-item label="主分类" prop="classificationId" label-width="80px">
                    <treeselect v-model="formClass.classificationId" :options="optionData" placeholder="请选择主分类"
                        style="width: 202.5px" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitClassForm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { listReceivable, getReceivable, delReceivable, addReceivable, updateReceivable, editMainClass } from "@/api/project/receivable";
import FileView from "@/components/FileView/index"
import { listType } from "@/api/maintype/type";
import Treeselect from "@riophae/vue-treeselect";
import MainType from "@/components/MainType/index"
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
    name: "Receivable",
    components: { Treeselect, FileView, MainType },
    dicts: ['receivable_status'],
    props: {
        id: {
            type: String,
            default: ""
        },
    },
    data() {
        return {
            titleClass: "修改主分类",
            openMainClass: false,
            typeCode: 'receivable',
            optionData: null,
            disabled: false,
            isShowBtn: true,
            dateRange: [],
            opt: "edit",
            businessId: null,
            fileType: 0,
            refreshKey: 0,
            index: null,
            businessCode: "InvoiceAttachment",
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 【请填写功能名称】表格数据
            receivableList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 15,
                projectId: null,
                projectName: null,
                contractId: null,
                contractName: null,
                contractNumber: null,
                cusId: null,
                cusName: null,
                bankName: null,
                bankSerial: null,
                payment: null,
                paidInAmount: null,
                amount: null,
                invoicing: null,
                collectionTime: null,
                invoicingTime: null,
                status: null,
                confirmId: null,
                confirmName: null,
                note: null,
                operateId: null,
                departmentName: null,
                organizationId: null,
                organizationName: null,
                creationTime: null,
                operateTime: null,
                creationId: null,
                creationName: null
            },
            // 表单参数
            form: {},
            formClass: {},
            // 表单校验
            rules: {
                paidInAmount: [
                    { required: true, message: "收款金额不能为空", trigger: "blur" },
                    {
                        pattern: /^[1-9]\d*$/,
                        message: "请输入正确的收款金额",
                        trigger: "blur"
                    }
                ],
                bankName: [
                    { required: true, message: "收款银行不能为空", trigger: "blur" },
                    { max: 50, message: '收款银行长度不能超过50', trigger: 'blur' }
                ],
                bankSerial: [
                    { required: true, message: "银行流水号不能为空", trigger: "blur" },
                    { max: 50, message: '银行流水号长度不能超过50', trigger: 'blur' }
                ],
                collectionTime: [
                    { required: true, message: "收款时间不能为空", trigger: "blur" },
                ],
                invoicing: [
                    {
                        pattern: /^[1-9]\d*$/,
                        message: "请输入正确的开票金额",
                        trigger: "blur"
                    }
                ],
            }
        };
    },
    created() {
        this.listType();
        this.getList();
    },
    methods: {
        editMainClass() {
            this.listType();
            if (this.ids.length == 0) {
                this.$message.error("请选择要修改的应收信息！");
            } else {
                this.openMainClass = true;
            }
        },
        submitClassForm() {
            if (this.formClass.classificationId == "undefined" || this.formClass.classificationId == "" || this.formClass.classificationId == null) {
                this.$message.error("请选择主分类！");
            } else {
                const params = {
                    receivableId: this.ids.toString(),
                    mainClassId: this.formClass.classificationId,
                };
                editMainClass(params).then(response => {
                    this.$modal.msgSuccess("修改成功");
                    this.openMainClass = false;
                    this.getList();
                });
            }
        },
        getNode(data, node, obj) {
            this.queryParams.classificationId = data.id;
            this.classId = data.id;
            this.getList()
        },
        listType() {
            listType({ typeCode: 'receivable' }).then(res => {
                this.optionData = res.data;
            })
        },
        /** 查询【请填写功能名称】列表 */
        getList() {
            this.loading = true;
            this.queryParams.projectId = this.id;
            listReceivable(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
                this.receivableList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                projectId: null,
                projectName: null,
                contractId: null,
                contractName: null,
                contractNumber: null,
                estimatedCollectionTime: null,
                classificationId: null,
                cusId: null,
                cusName: null,
                bankName: null,
                bankSerial: null,
                payment: null,
                paidInAmount: null,
                amount: null,
                invoicing: null,
                collectionTime: null,
                invoicingTime: null,
                status: null,
                confirmId: null,
                confirmName: null,
                note: null,
                operateId: null,
                departmentName: null,
                organizationId: null,
                organizationName: null,
                creationTime: null,
                operateTime: null,
                creationId: null,
                creationName: null
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 修改按钮操作 */
        handleUpdate(row, index) {
            this.reset();
            this.opt = "edit";
            this.fileType = 1;
            this.businessId = row.id;
            const id = row.id;
            this.index = (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index;
            getReceivable(id).then(response => {
                this.form = response.data;
                this.open = true;
                this.title = "修改应收管理信息";
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.paidInAmount > this.form.amount) {
                        this.$message.error('收款金额不能大于应收金额！');
                        return;
                    }
                    if (this.form.id != null) {
                        updateReceivable(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addReceivable(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleView(row, index) {
            this.reset();
            this.opt = "edit";
            this.fileType = 2;
            this.disabled = true;
            this.isShowBtn = false;
            this.businessId = row.id;
            const id = row.id;
            this.index = (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index;
            getReceivable(id).then(response => {
                this.form = response.data;
                this.open = true;
                this.title = "查看应收管理信息";
            });
            this.queryPaymentParams.projectId = row.projectId;
            listMethod(this.queryPaymentParams).then(response => {
                this.tableData = response.rows;
            });
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('system/receivable/export', {
                ...this.queryParams
            }, `receivable_${new Date().getTime()}.xlsx`)
        },
        indexMethod(index) {
            return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1;
        },
        showDate() {
            var mydate = new Date();
            var str = "" + mydate.getFullYear() + "-";
            str += (mydate.getMonth() + 1) <= 9 ? "0" + (mydate.getMonth() + 1) + "-" : mydate.getMonth() + 1 + "-";
            str += mydate.getDate() <= 9 ? "0" + mydate.getDate() : mydate.getDate();
            return str;
        },
        /** 提交按钮 */
        handleConfirm(row) {
            console.log(this.$store.state)
            this.$confirm('确认后不能再修改应收管理信息，是否继续？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                getReceivable(row.id).then(response => {
                    this.form = response.data;
                    this.form.status = "1";
                    this.form.confirmId = this.$store.state.user.info.userId;
                    this.form.confirmName = this.$store.state.user.name;
                    updateReceivable(this.form).then(response => {
                        this.$modal.msgSuccess("修改成功");
                        this.open = false;
                        this.getList();
                    });
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消保存'
                });
            });
        },
    }
};
</script>

<style scoped>
.text-no {
    color: red;
}

.text-yes {
    color: green;
}
</style>
